<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="cu-form-group1" >
				<view v-for="(item, index) in navList" :key="index"  :class="{textbiao2: tabCurrentIndex === index}" class="un-textbiao1" >
					{{item.text}}
				</view>
			</view>
			
			<swiper class="swiper-Demo" :current="tabCurrentIndex" duration="300">
				<swiper-item >
					<form @submit="formSubmit" >
						<view class="cu-form-group2">
							<input disabled="true" type="text" v-model="phone1" name="phoneNumber" ></input>
							<button  class="un-button" type="primary" plain="" @click="getCode">发送验证码</button>
						</view>
						
						<view class="cu-form-group3">
							<input placeholder="请输入验证码" type="text" :value="CODE" @input="inputCode" name="checkCode"></input>
						</view>
						
						<view class="uni-btn-v uni-common-mt">
								<button class="btn-submit" formType="submit" type="primary">下一步</button>
						</view>
						
						<view class="un-tixing" >
							<view class="un-tixing1" >
								<faicon type="exclamation-circle" size="20px" color="#999999"></faicon><text class="un-tixing-text">温馨提示:</text>
							</view>
							
							<text class="un-tixing-text1">手机号码修改成功后需要使用新的手机号码进行登录。</text>
						</view>
					</form>
				</swiper-item>
				
				<swiper-item >
					<form @submit="formNEWSubmit" >
						<view class="cu-form-group2">
							<input  placeholder="输入手机号码" type="text" v-model="NEWPHONE" name="phoneNumber" ></input>
							<button  class="un-button" type="primary" plain="" @click="getNEWCode">发送验证码</button>
						</view>
						
						<view class="cu-form-group3">
							<input placeholder="请输入验证码" type="text" :value="NEWCODE" @input="inputNEWCode" name="checkCode"></input>
						</view>
						
						<view class="uni-btn-v uni-common-mt">
								<button class="btn-submit" formType="submit" type="primary">确定</button>
						</view>
						
						<view class="un-tixing" >
							<view class="un-tixing1" >
								<faicon type="exclamation-circle" size="20px" color="#999999"></faicon><text class="un-tixing-text">温馨提示:</text>
							</view>
							<text class="un-tixing-text1">手机号码修改成功后需要使用新的手机号码进行登录。</text>
						</view>
					</form>
				</swiper-item>
				
				
				<uni-popup  :show="type=='two'" type="middle" >
					<form class="form1"  @submit="formSubmit1">
						<!-- 登录form -->
						<view class="login_form">
							<view class="pwd">请输入支付密码</view>
							<view class="input">
								<input type="password" name="newpwd" :value="newpwd1"   placeholder="支付密码">
							</view>
						</view>
						<!-- 登录提交 -->
						<button class="submit" type="primary"  formType="submit" >确定</button>
						<view class="yticon icon-fork badge" @click="togglePopup('')"></view>
					</form>
				</uni-popup>
			</swiper>
		</view>
	</view>
</template>

<script>
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '1.验证原号码',
					
					},
					{
						state: 1,
						text: '2.绑定新手机',
						
					},
					
				],
				PHONE: '',
				phone1:'',
				CODE: '',
				NEWPHONE: '',
				NEWCODE: '',
				type:'',
				newpwd1:''
			}
		},
		onLoad(options) {
			this.PHONE=options.phone;
			this.phone1=options.phone1;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			togglePopup(type){
				if(type===''){
					this.newpwd1 = ''
				}
				this.type = type
			},
			formSubmit1(e){
				var rule = [
					{name:"newpwd", checkType : "reg", checkRule: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$",  errorMsg:"密码太过简单"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					//验证通过以后向后台发送请求
					this.$http.post('/user/resetPhone',{
						PHONE:this.NEWPHONE,
						SIGNATURE:uni.getStorageSync("SIGNATURE"),
						TOKEN: uni.getStorageSync("userInfo").TOKEN,
						NEWCODE:this.NEWCODE,
						PWD : e.detail.value.newpwd1,
						}
					).then((res)=>{
							//判断返回内容
							if(res.data.STATE == '903'||res.data.STATE == '904'){
								uni.navigateTo({
									url:'/pages/public/login1'
								})
							}
							if(res.data.STATE === "0" && res.statusCode === 200){
								console.log("------------",res)
								uni.removeStorageSync("userInfo")
								uni.switchTab({
									url: '/pages/public/login1'
								});
							}else{
								uni.uni.showToast({
									title: res.data.MSG,
									icon:"none",
								});
							}
						})
					.catch((err)=>{
						console.log('request fail',err);
								}
						)
				}
			},
			formSubmit: function (e) {
				console.log(e.detail.value);
				
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"checkCode", checkType : "int", checkRule: "3,3",  errorMsg:"验证码格式不正确!"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					//验证通过以后向后台发送请求
					this.$http.post('/user/checkPhone',{
						PHONE:this.PHONE,
						SIGNATURE:uni.getStorageSync("SIGNATURE"),
						TOKEN: uni.getStorageSync("userInfo").TOKEN,
						CODE:this.CODE,
						}
					).then((res)=>{
							//判断返回内容
							if(res.data.STATE == '903'||res.data.STATE == '904'){
								uni.navigateTo({
									url:'/pages/public/login1'
								})
							}
							if(res.data.STATE === "0" && res.statusCode === 200){
								console.log("------------",res)
								this.tabCurrentIndex=1;
							}else{
								uni.uni.showToast({
									title: res.data.MSG,
									icon:"none",
								});
							}
						})
					.catch((err)=>{
						console.log('request fail',err);
						})
				//TODO不通过   提示用户验证码错误
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			getCode(){
				this.SIGNATURE = uni.getStorageSync("SIGNATURE");
				//验证通过以后向后台发送请求
				this.$http.post('/user/sendResetPwdCode',{
					PHONE : this.PHONE,
					SIGNATURE : this.SIGNATURE,
				}).then((res)=>{
					if(res.data.STATE == '903'||res.data.STATE == '904'){
						uni.navigateTo({
							url:'/pages/public/login1'
						})
					}
				})
				.catch((err)=>{
				    console.log('request fail', err);
				})
			},
			inputCode(e) {
				this.CODE = e.target.value
			},
			formNEWSubmit: function (e) {
				console.log(e.detail.value);
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"phoneNumber", checkType : "phoneno",  errorMsg:"请输入正确的手机号"},
					{name:"checkCode", checkType : "int", checkRule: "3,3",  errorMsg:"验证码格式不正确!"},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					this.type = 'two'
					
				//TODO不通过   提示用户验证码错误
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			getNEWCode(){
				this.SIGNATURE = uni.getStorageSync("SIGNATURE");
				
				//验证通过以后向后台发送请求
				this.$http.post('/user/sendResetPwdCode',{
					PHONE : this.NEWPHONE,
					SIGNATURE : this.SIGNATURE,
				}).then((res)=>{
					if(res.data.STATE == '903'||res.data.STATE == '904'){
						uni.navigateTo({
							url:'/pages/public/login1'
						})
					}
				})
				.catch((err)=>{
				    console.log('request fail', err);
				})
			},
			inputNEWCode(e) {
				this.NEWCODE = e.target.value
			},
			
		}
	}
</script>

<style lang="scss">
	page {
			background: #f5f5f5;
	}
	.swiper-Demo{
		height: 900upx;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 50upx 60upx;
		font-size: 32upx;
	}
	.cu-form-group1 {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		min-height: 90upx;
		justify-content: space-between;
		font-size: 24upx;
		border-top: 1upx solid #eee;
		border-bottom: 1upx solid #eee;
		margin-bottom: 20upx;
		
		.un-textbiao1{
			width: 50%;
			text-align: center;
			height: 80upx;
			line-height: 80upx;
			background-color: #f5f5f5;
			
		}
		.textbiao2{
			background-color: #ffffff;
			color: #F04844;
		}
	}
	.cu-form-group2 {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 90upx;
		justify-content: space-between;
		border-top: 1upx solid #eee;
		border-bottom: 1upx solid #eee;
		.un-button{
			height:60upx;
			color: #999999;
			border:1upx solid #999999;
			font-size: 24upx;
			border-radius: 0px;
			padding: 10upx;
			line-height: 40upx; 
		}
	}
	.cu-form-group3{
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 90upx;
		justify-content: space-between;
		
		border-bottom: 1upx solid #eee;
	}
	input{
		font-size: 28upx;
		width: 500upx;
		margin-left: 10upx;
	}
	
	.un-tixing{
		margin: 10upx 50upx;
		.un-tixing1{
			display: flex;
			font-size: 28upx;
			color: #999999;
			.un-tixing-text{
				font-size: 24upx;
				color: #999999;
				line-height: 40upx;
				margin-left: 10upx;
			}
		}
		.un-tixing-text1{
			font-size: 24upx;
			color: #999999;
		}
	}
</style>
